<template>
  <el-menu
    :default-active="$route.path"
    mode="horizontal"
    :ellipsis="false"
    router
    @select="handleSelect"
    style="height: 40px"
  >
    <SvgIcon
      icon="logo"
      style="height: 80%; width: 3em; padding-right: 10px; margin: auto 0"
    />
    <el-text>USBIP WEB 管理</el-text>
    <div class="flex-grow" />
    <!-- <el-menu-item index="/">
      <SvgIcon icon="info" style="width: 20px; padding-right: 10px" />
      信息
    </el-menu-item> -->
    <div class="flex-grow" />
    <el-button
      :type="connect_state ? 'success' : 'danger'"
      style="width: 20px; height: 20px; margin: auto 0"
      circle
    />
  </el-menu>
</template>
<script setup lang="ts">
import ws from "~/utils/ws";
import server_api from "~/utils/server_api";
import "element-plus/es/components/message/style/css";

const connect_state = toRef(ws.connect);

const handleSelect = (key: string, keyPath: string[]) => {
  if (key === "/config") {
    server_api.refresh_chip_info();
    server_api.refresh_wifi_info();
    server_api.refresh_afe_config();
    server_api.refresh_ota_config();
  } else if (key === "/record") {
    server_api.refresh_logs();
  }
};
</script>
<style scoped>
.flex-grow {
  flex-grow: 1;
}
</style>
